<template>
    <lightning-card
        title="HelloConditionalRendering"
        icon-name="custom:custom14"
    >
        <div class="slds-var-m-around_medium">
            <lightning-input
                type="checkbox"
                label="Show details"
                onchange={handleChange}
            ></lightning-input>

            <div class="slds-var-m-vertical_medium">
                <template lwc:if={areDetailsVisible}>
                    These are the details!
                </template>
                <template lwc:else> Not showing details. </template>
            </div>
        </div>

        <c-view-source source="lwc/helloConditionalRendering" slot="footer">
            Conditionally render elements.
        </c-view-source>
    </lightning-card>
</template>
